import { Link, Modal, Typography } from '@arco-design/web-react'
import React from 'react'
import handlerReadme from './handlerReadme.md?raw'

const { Paragraph, Title } = Typography

const contentStyle =`
<style>
.markdown-preview h2 {
    margin: 12px 0;
}

.markdown-preview code,
.markdown-preview pre {
    background-color: #f5f5f5;
    padding: 4px;
    border-radius: 4px;
}

.markdown-preview p {
    margin: 8px 0;
}

</style>
`

const HandlerReadme: React.FC = () => {
    const [visible, setVisible] = useState(false)

    return (
        <>
            <Link className='ml-2' onClick={() => setVisible(true)}>
                {' '}
                内容编辑说明{' '}
            </Link>
            <Modal
                className='w-[800px]'
                footer={null}
                visible={visible}
                onCancel={() => setVisible(false)}
            >
                <div
                    className='max-h-[80vh] overflow-y-auto'
                   
                    dangerouslySetInnerHTML={{
                        __html: ` ${contentStyle}<div class="crossnote markdown-preview  ">
      
<h1 id="1-内容编辑说明">1. 内容编辑说明 </h1>
<h2 id="1-mockjs-语法">1. MockJS 语法 </h2>
<p>可以使用 MockJS 语法，具体请参考：<a href="http://mockjs.com/examples.html">http://mockjs.com/examples.html</a></p>
<h2 id="2-使用表达式--expression-">2. 使用表达式 <code>{{ expression }}</code> </h2>
<p>提供了 <code>{{ expression }}</code> 语法，用于计算表达式，其中你可以访问api中变量以及请求中的变量。</p>
<p>其中 <code>expression</code> 为表达式，表达式需要遵循 JavaScript 的语法，且 <strong>不支持 ES6+</strong> 语法。</p>
<p><code>{{ expression }}</code> 的上下文：</p>
<pre data-role="codeBlock" data-info="typescript" class="language-typescript typescript"><code><span class="token comment">// api项中的变量</span>
<span class="token keyword keyword-interface">interface</span> <span class="token class-name">Variables</span> <span class="token keyword keyword-extends">extends</span> <span class="token class-name">Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token comment">// 执行mock后的对象</span>
<span class="token keyword keyword-interface">interface</span> <span class="token class-name">MockResult</span> <span class="token keyword keyword-extends">extends</span> <span class="token class-name">Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token comment">// _calc的 上下文</span>
<span class="token keyword keyword-interface">interface</span> <span class="token class-name">CalcContext</span> <span class="token keyword keyword-extends">extends</span> <span class="token class-name">Variables</span> <span class="token punctuation">{</span>
    <span class="token comment">// mock结果，当前mock结果对象</span>
    _t<span class="token operator">:</span> MockResult
    <span class="token comment">// 当前对象</span>
    _cur<span class="token operator">:</span> <span class="token builtin">any</span>
<span class="token punctuation">}</span>
</code></pre><p>示例：</p>
<pre data-role="codeBlock" data-info="" class="language-text"><code>_calc(1 + 1) // 2
_calc(true ? 1 : 0) // 1
_calc(varName) // 获取变量值
_calc(reqQuery.varName) // 获取请求参数中的变量值
_calc(reqParams.varName) // 获取路径参数中的变量值
_calc(_t.a.b.c) // 当前mock结果中的对象a的属性b的属性c
_calc(_t.a.b[0]) // 当前mock结果中的对象a的属性b的第一个元素

</code></pre><h2 id="3-在mock前执行-expression-">3. 在MOCK前执行：<code>!{{ expression }}</code> </h2>
<p>在 <code>{{ expression }}</code> 前添加 <code>!</code>，表示在生成数据前执行。</p>
<p>一次生成 mock 数据会按照下述顺序执行：</p>
<pre data-role="codeBlock" data-info="" class="language-text"><code>template -&gt; !{{ expression }} -&gt; MockJS -&gt; {{ expression }} -&gt; result
</code></pre><ol>
<li>首先会使用字符串替换的方式，匹配 <code>!{{ expression }}</code> 语法，计算其表达式。</li>
<li>然后会执行 mock，生成数据。</li>
<li>数据生成后使用字符串替换的方式，匹配 <code>{{ expression }}</code> 语法，计算其表达式。</li>
<li>最后返回数据。</li>
</ol>
<h2 id="4-唱吧活动引擎枚举mock规则">4. 唱吧活动引擎枚举mock规则 </h2>
<pre data-role="codeBlock" data-info="" class="language-text"><code>@snapshottag() : 快照标签 
@valuetype() : 值类型 
@drawcosttype() : 抽奖消耗类型 
@changbamoneytype() : 唱吧货币类型 
@ranktype() : 榜单类型 
@userprizerecordscenetype() : 发送奖励场景类型 
@snapshotstatus() : 快照状态 
@listenertopic() : 主题 
@gender() : 性别 
@activityteamtype() : 活动队伍类型 
@rankweight() : 榜单权重 
@event() : 事件 
@actiontype() : 动作 
@businessline() : 业务线 
@constantbusinesssubline() : 子业务线 
@prizetype() : 奖励类型 
@commoditylevel() : 奖励等级 
@operation() : 运算符 
@activitynumbertype() : 活动数值类型 
@sort() : 排序 
@refreshtype() : 刷新类型 
@membertype() : 成员类型 
@quantitylimitationtype() : 奖励数量限制类型 
@logicaloperation() : 逻辑运算 
@activitystatus() : 活动状态 
@gettertype() : 取值器类型 
</code></pre>
      </div>`,
                    }}
                ></div>
            </Modal>
        </>
    )
}

export default HandlerReadme
